import "xe-utils";
import VXETable from "vxe-table";
import XEUtils from "xe-utils";
import "vxe-table/lib/style.css";
import { formatNumber } from "@/utils/tool.js";
VXETable.formats.mixin({
  //格式kg
  formatWeight({ cellValue }) {
    return cellValue && XEUtils.divide(cellValue, 1000);
  },
  //截取小数点后num位
  formatNumberData({ cellValue, num = 4 }) {
    return cellValue && formatNumber(cellValue, num);
  },
});

VXETable.renderer.add("status", {
  // 状态展示
  renderDefault(renderOpts, params) {
    let { row, column } = params;
    let code = row[column.field];
    if (code) {
      return [
        h("div", {}, [
          h("i", {
            class: "iconfont icon-state_finish_line text-[#3188ff] mr-[2px]",
          }),
          h("span", {}, row[`${column.field}_text`]),
        ]),
      ];
    } else {
      return [
        h("div", {}, [
          h("i", {
            class: "iconfont icon-state_disabled text-[#e6000b] mr-[2px]",
          }),
          h("span", {}, row[`${column.field}_text`]),
        ]),
      ];
    }
  },
});
VXETable.renderer.add("ObjectMap", {
  //对象遍历
  renderDefault(renderOpts, params) {
    const { row, column } = params;
    const data = row[column.field];
    if (!data) return "";
    let renderContent = h("div"); // 默认的 VNode
    if (Array.isArray(data)) {
      // 如果是数组，渲染每个元素
      renderContent = data.map((item) =>
        h("div", [h("span", { class: "text-[#333]" }, item)])
      );
    } else if (typeof data === "object") {
      // 如果是对象，渲染键值对
      renderContent = Object.keys(data).map((key) =>
        h("div", [
          h("span", { class: "text-[#666]" }, `${key}: `),
          h(
            "span",
            { class: "text-[#333]" },
            data[key] ? JSON.stringify(data[key]) : ""
          ),
        ])
      );
    } else {
      // 其他情况直接渲染文本
      renderContent = h("div", [h("span", { class: "text-[#333]" }, data)]);
    }
    return renderContent;
  },
});
VXETable.renderer.add("arrMap", {
  //对象遍历
  renderDefault(renderOpts, params) {
    let { row, column } = params;
    let code = row[column.field];
    //便利对象将key和value通过冒号拼接,放在多个div中
    if (!code) return "";
    let arr = [];
    for (let key of code) {
      arr.push(h("div", {}, [h("div", { class: "text-[#666]" }, `${key}`)]));
    }
    return arr;
  },
});
VXETable.setup({
  table: {
    showOverflow: true,
    round: true,
    rowConfig: {
      height: 52,
    },
  },
  grid: {
    rowConfig: {
      height: 52,
    },
  },
});
